<template>
  <div class="cardEditWrapper">
    <div class="discountWrapper">
      <div class="stepWrapper">
        <div class="stepCase">
          <el-steps :active="1">
            <el-step title="填写优惠券信息" icon="el-icon-edit"></el-step>
            <el-step title="功能设置" icon="el-icon-upload"></el-step>
          </el-steps>
        </div>
      </div>
      <div class="cardEdit">
        <!-- 手机 -->
        <div id="boxFixed" :class="{'is_fixed' : isFixed}" :style="{'backgroundColor': phoneBackgroundColor}" class="phone">
          <div :style="{backgroundImage:`url(${topPhoneImage})`}" class="imageTop"></div>
          <div class="logoWrapper">
            <div :style="{backgroundImage:`url(${logoImage})`}" class="logoImage">  </div>
          </div>
          <!-- 表单内容 -->
          <div class="formContent">
            <div class="formTitle">
              微ETC
            </div>
            <div class="buttonWrapper">
              <el-button type="primary" size="small">立即使用</el-button>
            </div>
            <div class="formTime">
              <div>可用时间：<span class="formTimeText">周一至周日</span></div>
            </div>
            <div class="useShop">
              <div class="leftShop">适用门店</div>
              <div class="rightShop"><span>北京路</span><svg-icon icon-class="right" class="homeIcon"/></div>
            </div>
            <div class="useShop">
              <div class="leftShop">公众号</div>
              <div class="rightShop"><span></span><svg-icon icon-class="right" class="homeIcon"/></div>
            </div>
          </div>
          <!-- 自定义入口 -->
          <div class="diyContent">
            <div class="useShop">
              <div class="leftShop">适用门店</div>
              <div class="rightShop"><span>北京路</span><svg-icon icon-class="right" class="homeIcon"/></div>
            </div>
          </div>
        </div>
        <div v-if="isFixed" class="showDiv"></div>
        <!-- 右边表单 -->
        <div class="formWrapper">
          <el-form ref="form" :model="form" label-width="80px">
            <div class="baseTitle">基本信息</div>
            <el-form-item label="商户">
              <div class="iconWrapper">
                <div class="topIcon">
                  <div :style="{backgroundImage:`url(${logoImage})`}" class="logoImage"></div>
                  <div class="iconTitle">微ETC</div>
                </div>
                <div class="iconText">如商户信息有变更，请在卡券商户资料更新。</div>
              </div>
            </el-form-item>
            <el-form-item label="卡卷颜色">
              <el-color-picker v-model="phoneBackgroundColor"></el-color-picker>
            </el-form-item>
            <el-form-item label="折扣额度" class="discountNum">
              <el-input v-model="form.discountNum"><span slot="append">折</span></el-input>
              <div class="iconText">请填写1-9.9之间的数字，精确到小数点后1位</div>
            </el-form-item>
            <el-form-item label="折扣卷标题" class="discountNum" label-width="83px">
              <el-input v-model="form.discountTitle" :maxlength="9"></el-input>
              <div class="iconText">建议填写折扣券“折扣额度”及自定义内容，描述卡券提供的具体优惠</div>
            </el-form-item>
            <el-form-item label="有效期">
              <el-date-picker
                v-model="form.validDate"
                :picker-options="pickerOptions"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="可用时段" class="validTimeArea">
              <el-radio-group v-model="form.timeArea" @change="hanldeTimeAreaChange">
                <el-radio :label="1">全部时段</el-radio>
                <el-radio :label="2">部分时段</el-radio>
              </el-radio-group>
              <div v-if="form.timeArea == 2" class="onlyTimeArea">
                <div>
                  日期：
                </div>
                <div>
                  <el-checkbox-group v-model="form.restTimeArea">
                    <el-checkbox label="1" name="type">周一</el-checkbox>
                    <el-checkbox label="2" name="type">周二</el-checkbox>
                    <el-checkbox label="3" name="type">周三</el-checkbox>
                    <el-checkbox label="4" name="type">周四</el-checkbox>
                    <el-checkbox label="5" name="type">周五</el-checkbox>
                    <el-checkbox label="6" name="type">周六</el-checkbox>
                    <el-checkbox label="7" name="type">周日</el-checkbox>
                  </el-checkbox-group>
                </div>
              </div>
              <div v-if="form.timeArea == 2" class="addTimeCase">
                <a class="addTimeCaseText" @click="handleAddTime">添加时间段</a>
              </div>
              <div style="display: flex;">
                <div v-show="showTimearea">
                  <el-time-select
                    v-model="form.startTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '22:30'
                    }"
                    placeholder="起始时间"
                  >
                  </el-time-select>
                  <el-time-select
                    v-model="form.endTime"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '22:30',
                      minTime: form.startTime
                    }"
                    placeholder="结束时间"
                  >
                  </el-time-select>
                </div>
                <div v-show="showDeleteTimearea" style="margin-left: 20px; color: #409EFF" @click="handleDeleteTimearea">
                  删除时间段
                </div>
              </div>
            </el-form-item>
            <!-- 优惠详情 -->
            <div class="baseTitle">优惠详情</div>
            <el-form-item label="领劵限制（选填）" class="cardlimit">
              <el-input v-model="form.cardNum" type="text"><span slot="append">张</span></el-input>
              <div class="iconText">每个用户领券上限，如不填，则默认为1</div>
            </el-form-item>
            <el-form-item label="使用条件" class="useCondition">
              <el-checkbox v-model="form.useCondition" name="type">适用范围<span v-if="form.useCondition" style="color: black">（至少填写一项）</span></el-checkbox>
              <div v-if="form.useCondition">
                <el-form-item label="适用商品" class="applyShopWrapper">
                  <el-input v-model="form.applyShop" type="text" maxlength="15"></el-input>
                  <div class="iconText">填写本券适用的商品、类目或服务</div>
                </el-form-item>
                <el-form-item label="不适用商品" class="noApplyShopWrapper" label-width="85px">
                  <el-input v-model="form.NoApplyShop" type="text" maxlength="15"></el-input>
                  <div class="iconText">填写本券不适用的商品、类目或服务</div>
                </el-form-item>
              </div>
              <div style="display: flex">
                <div>优惠共享</div>
                <div style="margin-left: 20px;">
                  <el-select v-model="form.preferentialShared" placeholder="请选择">
                    <el-option
                      v-for="item in preferentialOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="iconText">
                使用条件的设置会在券上展示，请务必仔细确认。
              </div>
            </el-form-item>
            <el-form-item label="封面图片" class="coverphotoWrapper">
              <div class="iconText">图片建议尺寸：850像素*350像素，大小不超过2M。</div>
              <el-upload
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/">
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
              <div :style="{backgroundImage:`url(${coverImageUrl})`}" class="coverImageWrapper">
              </div>
            </el-form-item>
            <el-form-item label="封面简介">
              <el-input v-model="form.coverIntroduction" type="text" maxlength="12" placeholder="请输入封面图片的简介内容"></el-input>
            </el-form-item>
            <el-form-item label="优惠说明">
              <div>（本行是非自定义内容，无需填写）</div>
            </el-form-item>
            <el-form-item label="使用须知（选填）">
              <el-input v-model="form.useInformation" :rows="4" type="textarea" maxlength="300" placeholder="请填写本优惠券的注意事项"></el-input>
            </el-form-item>
            <el-form-item label="图文介绍（选填）" class="photoAndTextWrapper">
              <div class="iconText">图片建议尺寸：900像素 * 500像素，大小不超过2M。至少上传1组图文，最多输入5000字</div>
            </el-form-item>
            <div class="photoAndText">
              <div v-if="showPhotoAndText" class="showPhotoAndText">
                <div class="uploadImage">
                  <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarPhotoSuccess"
                    :before-upload="beforeAvatarUpload"
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/">
                    <div class="photoAndTextSvgWrapper"><svg-icon icon-class="upload" class="homeIcon"/></div>
                  </el-upload>
                  <div :style="{backgroundImage:`url(${photoAndTextImageUrl})`}" class="coverImageWrapper"></div>
                </div>
                <div>
                  <el-input v-model="form.photoAndTextInfo" :rows="4" type="textarea" maxlength="5000" placeholder="图片内容建议上传商品、服务、环境等优质图片，并辅之以简单描述，最多输入5000字"></el-input>
                </div>
                <div class="photoAndTextbutton">
                  <el-button type="primary">确认</el-button>
                  <el-button @click="handlePhotoAndTextCancel">取消</el-button>
                </div>
              </div>
              <div class="plusWrapper" @click="handleAddPhotoAndText"><svg-icon icon-class="plus" class="homeIcon"/></div>
            </div>
            <!-- 商户介绍 -->
            <div class="shopTitle">
              <div>商户介绍</div>
              <div class="shopTitleText" @click="handleClickShopOption"><a>{{ shopIntroductionOption }}</a></div>
            </div>
            <div v-if="showOption">
              <el-form-item label="电话" class="phoneWrapper">
                <el-input v-model="form.coverIntroduction" type="text" maxlength="12"></el-input>
                <div class="iconText">手机或固话</div>
              </el-form-item>
              <el-form-item label="商户服务">
                <el-checkbox-group v-model="form.shopService">
                  <el-checkbox label="1" name="type">免费wifi</el-checkbox>
                  <el-checkbox label="2" name="type">可带宠物</el-checkbox>
                  <el-checkbox label="3" name="type">免费停车</el-checkbox>
                  <el-checkbox label="4" name="type">可外卖</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </div>
            <!-- 自定义入口 -->
            <div class="baseTitle">自定义入口</div>
            <div class="diyWrapper">
              <el-button @click.native="handleAddEnter">添加自定义入口</el-button>
            </div>
            <div v-if="showDiyEnter">
              <div class="shopTitle">
                <div>入口一</div>
                <div class="shopTitleText" @click="handleDeleteEnter"><a>删除</a></div>
              </div>
              <el-form-item label="入口名称">
                <el-input v-model="form.enterName" type="text" maxlength="5"></el-input>
              </el-form-item>
              <el-form-item label="引导语（选填）">
                <el-input v-model="form.guideLanuage" type="text" maxlength="6"></el-input>
              </el-form-item>
              <el-form-item label="网页链接">
                <el-radio v-model="form.radioPageLink" label="1">网页链接</el-radio>
              </el-form-item>
              <el-form-item label="网页链接">
                <el-input v-model="form.pageLink" type="text">
                  <template slot="prepend">http://</template>
                </el-input>
              </el-form-item>
            </div>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import topPhoneImageTemp from '@/assets/img/topbar_white.png'
import logoImageTemp from '@/assets/img/logo.png'
import { Button, Step, Form, ColorPicker, DatePicker, TimePicker, Upload, Message } from 'element-ui'

export default {
  components: {
    Button, Step, Form, ColorPicker, DatePicker, TimePicker, Upload, Message
  },
  data() {
    return {
      phoneBackgroundColor: '#409EFF',
      isFixed: false,
      offsetTop: 0,
      topPhoneImage: topPhoneImageTemp,
      logoImage: logoImageTemp,
      cardType: '',
      form: {
        discountNum: '',
        discountTitle: '',
        validDate: [],
        timeArea: 1,
        restTimeArea: [],
        useCondition: false,
        cardNum: null,
        startTime: '',
        endTime: '',
        preferentialShared: '',
        applyShop: '',
        noApplyShop: '',
        useInformation: '',
        photoAndTextInfo: '',
        shopService: [],
        enterName: '',
        guideLanuage: '',
        pageLink: '',
        radioPageLink: '1'
      },
      showTimearea: false,
      showDeleteTimearea: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      preferentialOptions: [{
        value: '1',
        label: '不与其他优惠共享'
      }, {
        value: '2',
        label: '可与其他优惠共享'
      }],
      coverImageUrl: '',
      photoAndTextImageUrl: '',
      showPhotoAndText: false,
      shopIntroductionOption: '展开',
      showOption: false,
      showDiyEnter: false
    }
  },
  created() {
    this.cardType = this.$route.query.type
  },
  mounted() {
    // 吸顶操作
    window.addEventListener('scroll', this.initHeight)
    this.$nextTick(() => {
      this.offsetTop = document.querySelector('#boxFixed').offsetTop
    })
  },
  destroyed() {
    // 吸顶操作
    window.removeEventListener('scroll', this.initHeight)
  },
  methods: {
    // 吸顶操作
    initHeight() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      if (scrollTop > this.offsetTop + 50) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    },
    onSubmit() {
      console.log('submit!')
    },
    // 可用时段单选框时间触发
    hanldeTimeAreaChange(value) {
      console.log(value)
    },
    // 添加时间段
    handleAddTime() {
      this.showTimearea = true
      this.showDeleteTimearea = true
    },
    // 删除时间段
    handleDeleteTimearea() {
      this.form.startTime = ''
      this.form.endTime = ''
      this.showTimearea = false
      this.showDeleteTimearea = false
    },
    // 对图片的处理
    handleAvatarSuccess(res, file) {
      this.coverImageUrl = URL.createObjectURL(file.raw)
    },
    handleAvatarPhotoSuccess(res, file) {
      this.photoAndTextImageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    // 图文取消
    handlePhotoAndTextCancel() {
      this.showPhotoAndText = false
    },
    handleAddPhotoAndText() {
      this.showPhotoAndText = true
    },
    handleClickShopOption() {
      if (this.shopIntroductionOption === '展开') {
        this.showOption = true
      } else {
        this.showOption = false
      }
      this.shopIntroductionOption = this.shopIntroductionOption === '展开' ? '收起' : '展开'
    },
    // 自定义入口
    handleAddEnter() {
      this.showDiyEnter = true
    },
    handleDeleteEnter() {
      this.showDiyEnter = false
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/variables.scss';
.cardEditWrapper {
  padding: 10px 10px;
  .discountWrapper {
    padding-top: 10px;
    background-color: white;
    .stepWrapper {
      border-bottom: 1px solid $color-border-1;
      padding-bottom: 10px;
      .stepCase {
        font-size: 14px;
        width: 300px;
        height: 50px;
        margin: 0 auto;
      }
    }
    .cardEdit {
      padding: 20px 50px;
      display: flex;
      overflow: auto;
      .phone {
        padding-left: 10px;
        padding-right: 10px;
        position: relative;
        width: 300px;
        height: 500px;
        background-color: green;
        .imageTop {
          margin-top: 5px;
          width: auto;
          height: 35px;
          background-repeat: no-repeat;
          background-size: cover;
        }
        .logoWrapper {
          .logoImage {
            z-index: 5;
            position: absolute;
            left: 46%;
            top: 45px;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            background-repeat: no-repeat;
            background-size: cover;
          }
        }
        .formContent {
          border-radius: 5px;
          padding: 20px 7px;
          margin-top: 20px;
          width: 100%;
          background-color: white;
          .formTitle {
            margin-top: 10px;
            text-align: center;
            color: $color-text-3;
            font-size: 15px;
          }
          .buttonWrapper {
            margin-top: 10px;
            text-align: center;
            height: 20px;
          }
          .formTime {
            padding-bottom: 5px;
            border-bottom: 1px dashed $color-text-3;
            margin-top: 50px;
            font-size: 14px;
            .formTimeText {
              color: $color-text-3;
            }
          }
          .useShop {
            margin-top: 15px;
            padding-bottom: 5px;
            border-bottom: 1px dashed $color-text-3;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            .rightShop {
              color: $color-text-3;
            }
          }
        }
        .diyContent {
          border-radius: 5px;
          background-color: white;
          margin-top: 15px;
          padding: 10px 7px;
          .useShop {
            padding-bottom: 5px;
            border-bottom: 1px dashed $color-text-3;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            .rightShop {
              color: $color-text-3;
            }
          }
        }
      }
      .is_fixed {
        padding-left: 10px;
        padding-right: 10px;
        position: fixed;
        width: 296px;
        height: 500px;
        top: 0px;
        z-index: 999;
      }
      .formWrapper {
        position: relative;
        margin-left: 20px;
        width: 70%;
        background-color: $background-color;
        padding: 30px 10px;
        .baseTitle {
          margin-bottom: 20px;
          font-size: 14px;
          border-bottom: 1px solid #e6e9eb;
          padding-bottom: 10px;
        }
        .iconWrapper {
          .topIcon {
            display: flex;
            .logoImage {
              margin-top: 13px;
              background-repeat: no-repeat;
              background-size: cover;
              width: 80px;
              height: 80px;
            }
            .iconTitle {
              margin-left: 20px;
            }
          }
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
        }
        .discountNum {
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
        }
        .validTimeArea {
          .onlyTimeArea {
            display: flex;
          }
          .addTimeCase {
            .addTimeCaseText {
              color: #409EFF;
            }
          }
        }
        .cardlimit {
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
        }
        .useCondition {
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
        }
        .coverphotoWrapper {
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
          .coverImageWrapper {
            width: 200px;
            height: 100px;
            background-size: cover;
            background-repeat: no-repeat;
          }
        }
        .photoAndTextWrapper {
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
        }
        .photoAndText {
          padding: 10px;
          background-color: white;
          margin-bottom: 30px;
          margin-left: 80px;
          width: 300px;
          border: 1px solid $color-border-1;
          padding: 5px;
          text-align: center;
          .plusWrapper {
            margin-top: 5px;
            border: 1px dashed $color-border-1;
            .homeIcon {
              margin-top: 5px;
              width: 30px;
              height: 30px;
            }
          }
          .showPhotoAndText {
            .uploadImage {
              background-color: $background-color;
              margin-bottom: 10px;
              .photoAndTextSvgWrapper {
                width: 100%;
                height: 30px;
                .homeIcon {
                  margin-top: 5px;
                  width: 40px;
                  height: 40px;
                }
              }
              .coverImageWrapper {
                background-color: white;
                width: 100%;
                height: 100px;
                background-size: cover;
                background-repeat: no-repeat;
              }
            }
            .photoAndTextbutton {
              text-align: right;
              margin-top: 10px;
              margin-bottom: 10px;
            }
          }
        }
        .shopTitle {
          margin-bottom: 20px;
          font-size: 14px;
          border-bottom: 1px solid #e6e9eb;
          padding-bottom: 10px;
          display: flex;
          justify-content: space-between;
          .shopTitleText {
            color: #576b95;
          }
        }
        .phoneWrapper {
          .iconText {
            font-size: 14px;
            color: $color-text-3;
          }
        }
        .diyWrapper {
          margin-bottom: 20px;
        }
      }
      .showDiv {
        position: relative;
        width: 300px;
        height: 500px;
      }
    }
  }
}
</style>
<style>
.el-step__title.is-finish {
  font-size: 14px;
}
.el-step__title.is-process {
  font-size: 14px;
}
</style>
